<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 收件箱</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content mailbox-content">
                        <div class="file-manager">
                            <a class="btn btn-block btn-primary compose-mail" href="javascript:add();">新建被征收人</a>
                            <a class="btn btn-block btn-primary compose-mail" href="${path}/household/list">全部</a>
                            <div class="space-25"></div>
                            <h5>档案类别</h5>
                            <ul class="folder-list m-b-md" style="padding: 0">
                                <c:forEach items="${templates }" var="template">
                                    <li><a href="${path}/household/list"><i class="fa fa-archive"></i> ${template.name }</a></li>
                                </c:forEach>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">
                <div class="mail-box-header">

                    <form method="get" action="index.html" class="pull-right mail-search">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm" name="search" placeholder="搜索被征收人档案">
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    搜索
                                </button>
                            </div>
                        </div>
                    </form>
                    <h2>
                    档案库
                </h2>
                    <div class="mail-tools tooltip-demo m-t-md">
                        <div class="btn-group pull-right">
                            <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
                            <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>

                        </div>
                        <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="刷新档案库"><i class="fa fa-refresh"></i> 刷新</button>
                        <button class="btn btn-white btn-sm print" data-toggle="tooltip" data-placement="top" title="批量打印"><i class="fa fa-print"></i></button>
                        <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="删除"><i class="fa fa-trash-o"></i></button>

                    </div>
                </div>
                <div class="mail-box">

                    <table class="table table-hover table-mail">
                        <tbody id="household-list">
                            <jsp:useBean id="dateValue" class="java.util.Date"/>
                            <c:forEach items="${masters }" var="master">
                                <tr data-id="${master.id }" class="read">
                                    <td class="check-mail"><input type="checkbox" class="i-checks"></td>
                                    <td class="mail-ontact"><a href="${path}/household/detail?id=${master.id }">${master.name }</a></td>
                                    <td class="mail-subject"><a href="${path}/household/detail?id=${master.id }">${master.collectAddress }</a></td>
                                    <td class=""></td>
                                    <jsp:setProperty name="dateValue" property="time" value="${master.createTime}"/>
                                    <fmt:formatDate value="${dateValue}" var="dateString" pattern="yyyy-MM-dd HH:mm:ss"/>
                                    <td class="text-right mail-date">${dateString }</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <%--<script src="../js/content.js?v=1.0.0"></script>--%>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $('.print').click(function () {

                var html ='\
                    <div class="ibox-content" style="overflow: hidden;height: 100%;">\
                        <form class="form-horizontal" method="post">\
                           <div class="form-group">\
                               <label class="col-sm-4 control-label">打印选择</label>\
                               <div class="col-sm-8">\
                                   <select name="archives-name" class="form-control m-b" style="display: table-cell;margin: 0;">\
                                    <c:forEach items="${templates }" var="template">\
                                        <option value="${template.id}">${template.name }</option>\
                                    </c:forEach>\
                                    </select>\
                               </div>\
                           </div>\
                        </form>\
                    </div>';
                layer.open({
                    type: 1,
                    area: ['auto','auto'],
                    content: html,
                    btn:['打印','取消'],
                    yes: function(index, layero){
                        var data={}
                        data.archiveId = $(layero).find('select').val();
                        data.current = true;
                        data.masterIds = [];
                        $('#household-list input[type="checkbox"]:checked').parents('tr').each(function () {
                            data.masterIds.push($(this).attr('data-id'));
                        });
                        window.open("${path}/print?data="+JSON.stringify(data));
                        layer.close(index);
                    }
                })
                return false;
            });
        });
        
        function add() {

            var html =
                '<div class="ibox-content" style="overflow: hidden;height: 100%;">'+
                '<form class="form-horizontal" method="post">' +
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">被征收人</label> '+
                '       <div class="col-sm-10"><input name="name" type="text" class="form-control"></div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">原房屋坐落</label> '+
                '       <div class="col-sm-10"><input name="collectAddress" type="text" class="form-control"></div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">联系地址</label> '+
                '       <div class="col-sm-10"><input name="contactAddress" type="text" class="form-control"></div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">联系电话</label> '+
                '       <div class="col-sm-10"><input name="contactPhone" type="text" class="form-control"></div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">证件号</label> '+
                '       <div class="col-sm-10"><input name="idNo" type="text" class="form-control"></div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">家庭成员</label> '+
                '       <div class="col-sm-10">'+
                '           <div class="input-group">'+
                '               <input type="number" min=1 class="form-control" name="member"> <span class="input-group-addon">人</span>'+
                '           </div>' +
                '       </div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <label class="col-sm-2 control-label">困难户</label> '+
                '       <div class="col-sm-10">' +
                '           <div class="checkbox-inline i-checks">' +
                '               <label><input type="checkbox" value="1" name="difficultLow" > <i></i>低保户</label>' +
                '           </div>' +
                '           <div class="checkbox-inline i-checks">' +
                '               <label><input type="checkbox" value="1" name="difficultFive" > <i></i>五保户</label>' +
                '           </div>' +
                '           <div class="checkbox-inline i-checks">' +
                '               <label><input type="checkbox" value="1" name="difficultOld" > <i></i>孤寡老人</label>' +
                '           </div>' +
                '       </div> '+
                '   </div> '+
                '</form>'+
                '</div>';
            layer.open({
                type: 1,
                area: ['900px','auto'],
                content: html,
                btn:['保存','取消'],
                success:function (layero, index) {
                    $(layero).find('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });
                },
                yes: function(index, layero){

                    var options ={
                        type: "post",
                        url: "${path}/api/household/save/master",
                        dataType: "json",
                        uploadProgress: function (event, position, total, percentComplete) {
//                            $(progress).width(((position/total)*100)+'%');
                        },
                        success: function (result) {
                            if (result.code == "${result_success}") {
                                layer.msg("保存成功");
                                $('#household-list').prepend('\
                                <tr data-id="'+result.data.id+'" class="read">\
                                    <td class="check-mail"><input type="checkbox" class="i-checks"></td>\
                                    <td class="mail-ontact"><a href="${path}/household/detail?id='+result.data.id+'">'+result.data.name+'</a></td>\
                                    <td class="mail-subject"><a href="${path}/household/detail?id='+result.data.id+'">'+result.data.collectAddress+'</a></td>\
                                    <td class=""></td>\
                                    <td class="text-right mail-date">'+result.data.createTime+'</td>\
                                </tr>\
                                ');

                                $('#household-list tr[data-id="'+result.data.id+'"] .i-checks').iCheck({
                                    checkboxClass: 'icheckbox_square-green',
                                    radioClass: 'iradio_square-green',
                                });
                                layer.close(index);
                            }else {
                                layer.msg(result.data);
                            }
                        }
                    };

                    $(layero).find('form').ajaxSubmit(options);

                }
            })
            return false;
        }
    </script>

</body>

</html>
